<!--
 * @Description: 批次汇总统计
-->
<template>
  <BaseMainSlot :show-search-box="false" :show-btn-box="false">
    <template v-slot:table-box>
      <div v-if="!detailVisible" v-loading="loading" class="batchbox">
        <template v-if="batchList.length">
          <div class="batchone" v-for="item,index in batchList">
            <div class="batch-title">
              <div class="batch-no">批次号：SA29715435</div>
              <div class="batch-status">
                <div :class="{ active: item.finishStatus == 'NEW_CREATE' }">新创建</div>
                <div :class="{ active: item.finishStatus == 'NOT_FINISH' }">未完成</div>
                <div :class="{ active: item.finishStatus == 'FINISH' }">已完成</div>
              </div>
            </div>
            <div class="batch-content">
              <div class="batch-desc">
                <div class="label">批次名称：</div>
                <div class="desc">{{ item.batchName }}</div>
              </div>
              <div class="batch-desc">
                <div class="label">种植类型：</div>
                <div class="desc">{{ getFarmTypeName(item.farmingTypeNo) }}</div>
              </div>
              <div class="batch-desc">
                <div class="label">种植设施：</div>
                <div class="desc">
                  <el-tooltip placement="top" effect="light" trigger="hover" :content="item.facilityNames">
                    <span>{{ item.facilityNames }}</span>
                  </el-tooltip>
                </div>
              </div>
              <div class="batch-desc">
                <div class="label">种植品种：</div>
                <div class="desc">{{ item.varietyName }}</div>
              </div>
              <div class="batch-desc">
                <div class="label">种植周期：</div>
                <div class="desc">
                  {{ item.plantingPeriodType === 'SEASONS' ? '多季作物' : item.cycle + "天" }}
                </div>
              </div>
              <div class="batch-desc">
                <div class="label">投产量：</div>
                <div class="desc">{{ item.assetValue }}{{ item.assetUnitName }}</div>
              </div>
              <div class="batch-desc">
                <div class="label">种植规模：</div>
                <div class="desc">{{ item.area }}{{ item.areaUnitName }}</div>
              </div>
              <div class="batch-desc">
                <div class="label">创建日期：</div>
                <div class="desc">{{ item.assetDate }}</div>
              </div>
            </div>
            <div class="batch-footer">
              <div class="btndefault" @click="getgrowtop(item)">
                <div class="btn">
                  <i class="el-icon-search"></i>
                  <span>查看详情</span>
                </div>
              </div>
            </div>
          </div>
        </template>
        <div class="noData" v-else>
          暂无数据
        </div>
        <Pagination
          :page-size="pageSize"
          :current-page="currentPage"
          :total-size="totalSize"
          @changePageSize="changePageSize"
          @changeCurrentPage="changeCurrentPage"
        />
      </div>

      <div v-else class="batchdetail">
        <div class="growth-title">
          <img src="~@/assets/pest-knowledge/icon-arrow.png" alt="">
          批次基本信息
          <div class="toback btndefault" @click="detailVisible = false">
            <div class="btn">
              <img src="~@/assets/fh.png" alt />
              <span>返回</span>
            </div>
          </div>
        </div>
        <div class="growth-title-batch">
          <span class="batch">{{ growthInfo.batchName }}</span>
          <span>{{ growthInfo.batchNo }}</span>
        </div>
        <div class="growth-info">
          <div class="growth-info-content">
            <div>种植类型：{{ getFarmTypeName(growthInfo.farmingTypeNo) }}</div>
            <div>种植设施：{{ growthInfo.facilityNames }}</div>
            <div>种植品种：{{ growthInfo.varietyName }}</div>
            <div>当前已种植天数：{{ growthInfo.plantingPeriodType === 'SEASONS' ? '多季作物' : growthInfo.cycle + "天" }}</div>
          </div>
          <div class="growth-info-time">
            创建时间：{{ growthInfo.assetDate }}
          </div>
        </div>
        <div class="growth-title">
          <img src="~@/assets/pest-knowledge/icon-arrow.png" alt="">
          生长阶段信息
          <div class="allbtn btndefault" @click="getGrothAll">
            <div class="btn">
              <i class="el-icon-search"></i>
              <span>查看全部信息</span>
            </div>
          </div>
        </div>
        <div class="growth-stage">
          <div class="growth-stage-view">
            <div
              v-for="(item,index) in growimagelist"
              :key="index"
              class="show-view-item"
              :class="index === nowgrowimageindex ? 'show-view-item-slect' : ''"
              @click="getdatapictureid(item, index)"
            >
              <template v-if="item && item.zhid">
                <div
                  v-if="item.name"
                  class="view-item-image-name"
                >{{ item.name }}</div>
                <img
                  :src="item.value"
                  class="view-item-image"
                  :height="setimageheight(index)"
                  :width="setimagewidth(index)"
                />
                <div
                  class="view-item-image-time"
                >{{ item.startTime }}-{{ item.endTime }}</div>
              </template>
            </div>
          </div>
        </div>
        <div class="groth-table">
          <div class="growth-title">
            <img src="~@/assets/pest-knowledge/icon-arrow.png" alt="">
            农资投入信息
          </div>
          <div class="tablebox">
            <Table :showEditColumn="false" :propList="tableColumn1" v-loading="loading1" :listData="tableData1" :showSelectColumn="false">
              <template v-slot:facilityBOList="{ row }">
                <template v-if="!row.index">
                  <el-button
                    class="text-btn-cursor"
                    type="text"
                    size="small"
                    @click="seeEquip(row)"
                  >
                    <i class="el-icon-view"></i> 查看
                  </el-button>
                </template>
              </template>
              <template v-slot:materialName="{ row, item }">
                <template v-if="!row.index">
                  {{ row.materialDTO ? row.materialDTO[item.prop] : "" }}
                </template>
              </template>
              <template v-slot:assetQuantity="{ row }">
                <template v-if="!row.index">
                  <div>{{ row.assetQuantity }}{{ row.unitName }}</div>
                </template>
              </template>
              <template v-slot:pictureNo="{ row }">
                <template v-if="!row.index">
                  <el-button
                    v-if="row.pictureNo"
                    type="success"
                    @click="upimage(row.pictureNo)"
                  >点击查看</el-button>
                  <span v-else>暂无图片</span>
                </template>
              </template>
            </Table>
          </div>
          <Pagination
            :page-size="pageSize1"
            :current-page="currentPage1"
            :total-size="totalSize1"
            @changePageSize="changePageSize1"
            @changeCurrentPage="changeCurrentPage1"
          />
        </div>
        <div class="groth-table">
          <div class="growth-title">
            <img src="~@/assets/pest-knowledge/icon-arrow.png" alt="">
            农事作业信息
          </div>
          <div class="tablebox">
            <Table :showEditColumn="false" :propList="tableColumn2" v-loading="loading2" :listData="tableData2" :showSelectColumn="false">
              <template v-slot:facilityBOList="{ row }">
                <template v-if="!row.index">
                  <el-button
                    class="text-btn-cursor"
                    type="text"
                    size="small"
                    @click="seeEquip(row)"
                  >
                    <i class="el-icon-view"></i> 查看
                  </el-button>
                </template>
              </template>
              <template v-slot:inputsRecordBOList="{ row }">
                <template v-if="!row.index">
                  <el-button
                    class="text-btn-cursor"
                    type="text"
                    size="small"
                    @click="seeEquips(row)"
                  >
                    <i class="el-icon-view"></i> 查看
                  </el-button>
                </template>
              </template>
              <template v-slot:execStartTime="{ row }">
                <template v-if="!row.index">
                  {{ row.execStartTime }} - {{ row.execEndTime }}
                </template>
              </template>
              <template v-slot:personBOList="{ row }">
                <template v-if="!row.index">
                  <span
                    v-for="(facitem, facindex) in row.personBOList"
                    :key="facindex"
                  >
                    <span v-if="facitem">
                      {{ facitem.name }}
                      <span v-if="facindex != row.personBOList.length - 1">、</span>
                    </span>
                  </span>
                </template>
              </template>
            </Table>
          </div>
          <Pagination
            :page-size="pageSize2"
            :current-page="currentPage2"
            :total-size="totalSize2"
            @changePageSize="changePageSize2"
            @changeCurrentPage="changeCurrentPage2"
          />
        </div>
        <div class="groth-table-two">
          <div class="table-box">
            <div class="growth-title">
              <img src="~@/assets/pest-knowledge/icon-arrow.png" alt="">
              病虫害信息
            </div>
            <div class="tablebox">
              <Table :showEditColumn="false" :propList="tableColumn3" v-loading="loading3" :listData="tableData3" :showSelectColumn="false">
                <template v-slot:img="{ row, item }">
                  <template v-if="!row.index">
                    <el-button
                      v-if="row[item.prop]"
                      type="success"
                      @click="getpicmessage(row[item.prop])"
                    >点击查看</el-button>
                    <span v-else>暂无图片</span>
                  </template>
                </template>
                <template v-slot:facilityNoList="{ row }">
                  <template v-if="!row.index">
                    <el-button
                      class="text-btn-cursor"
                      type="text"
                      size="small"
                      @click="checkFacility(row)"
                    >
                      <i class="el-icon-view"></i> 查看
                    </el-button>
                  </template>
                </template>
              </Table>
            </div>
            <Pagination
              :page-size="pageSize3"
              :current-page="currentPage3"
              :total-size="totalSize3"
              @changePageSize="changePageSize3"
              @changeCurrentPage="changeCurrentPage3"
            />
          </div>
          <div class="table-box">
            <div class="growth-title">
              <img src="~@/assets/pest-knowledge/icon-arrow.png" alt="">
              产量信息
            </div>
            <div class="tablebox">
              <Table :showEditColumn="false" :propList="tableColumn4" v-loading="loading4" :listData="tableData4" :showSelectColumn="false">
                <template v-slot:standardName="{ row }">
                  <template v-if="!row.index && row.yieldNo">
                    {{ row.standard ? row.standard.standardName : "——" }}
                  </template>
                </template>
                <template v-slot:yield="{ row }">
                  <template v-if="!row.index && row.yieldNo">
                    {{ row.yield }}{{ row.unitName }}
                  </template>
                </template>
              </Table>
            </div>
            <Pagination
              :page-size="pageSize4"
              :current-page="currentPage4"
              :total-size="totalSize4"
              @changePageSize="changePageSize4"
              @changeCurrentPage="changeCurrentPage4"
            />
          </div>
        </div>
        <div class="groth-table-two">
          <div class="table-box">
            <div class="growth-title">
              <img src="~@/assets/pest-knowledge/icon-arrow.png" alt="">
              防治信息
            </div>
            <div class="tablebox">
              <Table :showEditColumn="false" :propList="tableColumn5" v-loading="loading5" :listData="tableData5" :showSelectColumn="false">
                <template v-slot:facilityNoList="{ row }">
                  <template v-if="!row.index">
                    <el-button
                      class="text-btn-cursor"
                      type="text"
                      size="small"
                      @click="checkEliFacility(row)"
                    >
                      <i class="el-icon-view"></i> 查看
                    </el-button>
                  </template>
                </template>
                <!-- 查看用药信息 -->
                <!-- <template v-slot:inputsRecordBOs="{ row }">
                  <template v-if="!row.index">
                    <el-button
                      class="text-btn-cursor"
                      type="text"
                      size="small"
                      @click="useMedicine(row)"
                    >
                      <i class="el-icon-view"></i> 查看
                    </el-button>
                  </template>
                </template> -->
                <template v-slot:dragNum="{ row }">
                  <template v-if="!row.index">
                    {{ row.dragNum }}
                    {{ row.dragUnitName || '' }}
                  </template>
                </template>
              </Table>
            </div>
            <Pagination
              :page-size="pageSize5"
              :current-page="currentPage5"
              :total-size="totalSize5"
              @changePageSize="changePageSize5"
              @changeCurrentPage="changeCurrentPage5"
            />
          </div>
          <div class="table-box">
            <div class="growth-title">
              <img src="~@/assets/pest-knowledge/icon-arrow.png" alt="">
              淘汰信息
            </div>
            <div class="tablebox">
              <Table :showEditColumn="false" :propList="tableColumn6" v-loading="loading6" :listData="tableData6" :showSelectColumn="false">
                <template v-slot:facilities="{ row, item }">
                  <template v-if="!row.index">
                    <el-button
                      class="text-btn-cursor"
                      type="text"
                      size="small"
                      @click="checkEliFacility(row, item.prop)"
                    >
                      <i class="el-icon-view"></i> 查看
                    </el-button>
                  </template>
                </template>
              </Table>
            </div>
            <Pagination
              :page-size="pageSize6"
              :current-page="currentPage6"
              :total-size="totalSize6"
              @changePageSize="changePageSize6"
              @changeCurrentPage="changeCurrentPage6"
            />
          </div>
        </div>
        <div class="groth-table">
          <div class="growth-title">
            <img src="~@/assets/pest-knowledge/icon-arrow.png" alt="">
            治疗信息
          </div>
          <div class="tablebox">
            <Table :showEditColumn="false" :propList="tableColumn7" v-loading="loading7" :listData="tableData7" :showSelectColumn="false">
              <template v-slot:facilityNoList="{ row }">
                <template v-if="!row.index">
                  <el-button
                    class="text-btn-cursor"
                    type="text"
                    size="small"
                    @click="seeEquip(row)"
                  >
                    <i class="el-icon-view"></i> 查看
                  </el-button>
                </template>
              </template>
              <template v-slot:singleNos="{ row }">
                <template v-if="!row.index">
                  <el-button
                    class="text-btn-cursor"
                    type="text"
                    size="small"
                    @click="seeIll(row)"
                  >
                    <i class="el-icon-view"></i> 查看
                  </el-button>
                </template>
              </template>
            </Table>
          </div>
          <Pagination
            :page-size="pageSize7"
            :current-page="currentPage7"
            :total-size="totalSize7"
            @changePageSize="changePageSize7"
            @changeCurrentPage="changeCurrentPage7"
          />
        </div>
      </div>
    </template>
    <template v-slot:dialog>
      <SeeEquip
        :is-show-equip="isShowEquip"
        :equip-data="facilityBOList"
        @closeDialog="isShowEquip = false"
      />
      <el-dialog
        class="dialog"
        title="查看农资图片"
        :visible.sync="dialogFormPicVisible"
      >
        <!-- <img v-for="item,i in imgUrl" :key="i" :src="item" style="width: 100%;" /> -->
        
        <el-image
          v-for="item in imgUrl"
          style="width: 100%;"
          :src="item"
          :preview-src-list="imgUrl">
        </el-image>
      </el-dialog>
      <el-dialog
        :title="showTitle"
        :visible.sync="showEquips"
        width="30%"
        class="dialogRec"
        @close="showEquips = false"
      >
        <div v-if="showTitle == '投入农资信息'" class="facility-list">
          <div
            v-for="(item, index) in inputsRecordBOList"
            :key="index"
            class="facility-item"
          >
            <!-- {{ item.facilityName }} -->
            <div class="info-line">
              <div class="name">投入农资名称：</div>
              <div class="value">{{ item.materialDTO.materialName }}</div>
            </div>
            <div class="info-line">
              <div class="name">投入量：</div>
              <div class="value">{{ item.assetQuantity }}</div>
            </div>
          </div>
        </div>
        <div v-else class="facility-list">
          <div
            v-for="(item, index) in inputsRecordBOList"
            :key="index"
            class="facility-item"
          >
            <div class="info-line">
              <div class="name">编号：</div>
              <div class="value">{{ item }}</div>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" @click="showEquips = false"
            >关 闭</el-button
          >
        </span>
      </el-dialog>
      <!-- 查看用药 -->
      <el-dialog
        title="用药信息"
        :visible="useMedicineVisible"
        :before-close="
          () => {
            useMedicineVisible = false;
          }
        "
      >
        <div class="medicine">
          <div
            v-for="(item, index) in useMedicineList"
            :key="index"
            class="medicine-item"
          >
            <div class="info-line">
              <div class="name">防治药品名称：</div>
              <div class="value">{{ item.materialDTO.materialName }}</div>
            </div>
            <div class="info-line">
              <div class="name">投入量：</div>
              <div class="value">{{ item.assetQuantity }}{{ item.materialDTO.unitName }}</div>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" @click="useMedicineVisible = false">
            关 闭
          </el-button>
        </div>
      </el-dialog>
    </template>
  </BaseMainSlot>
</template>

<script>
import BaseMainSlot from "@/components/BaseMainSlot/newBaseMainSlot.vue";
import Table from '@/components/table/table.vue';
import Pagination from "@/components/Pagination";
import SeeEquip from "@/components/seeEquip/index.vue";
import growthApi from "@/api/digital-production/growth-record-management/seedling-growth-analysis";
import batchApi from "@/api/digital-production/production-batch-manage/production-batch-query/index";
import getfarmtypelistmethod from "@/api/basic-info-manage/agricultural-type-manage";
import managementtwo from "@/api/digital-production/agr-input-management/agr-input-managementtwo";
import agriculturalRecords from "@/api/digital-production/agricultural-work-management/agricultural-records-management";
import pestApi from "@/api/digital-production/pest-management/pest-zhalarm/index";
import pestInfoApi from "@/api/basic-info-manage/pest-info/index";
import userApi from "@/api/user/index"
import outputApi from "@/api/digital-production/production-statistics/output-input";
import eliminationApi from "@/api/digital-production/health-management/elimination-management/index";
import pestControlApi from "@/api/digital-production/health-management/pest-control/index";
import healthPestApi from "@/api/digital-production/health-management/pest-record/index";
import { mymixin } from "@/utils/mixin";
import { getToken } from "@/utils/auth";
import { farmingTypeTitle } from "@/utils/validate";

export default {
  name: "ProductionBatchQuery",
  components: {
    BaseMainSlot,
    Table,
    Pagination,
    SeeEquip,
  },
  mixins: [mymixin],
  data() {
    var farmingTypeTitles = farmingTypeTitle()
    return {
      loading: false,
      batchList: [],
      detailVisible: false,
      growthInfo: {},
      growimagelist: [],
      nowgrowimageindex: 0,
      showTitle: '',
      useMedicineVisible: false,
      useMedicineList: [],
      // 农资投入信息
      loading1: false,
      tableColumn1: [
        { prop: 'facilityBOList', label: '投入设施', slotName: 'facilityBOList', minWidth: '110' },
        { prop: 'materialName', label: '投入农资名称', slotName: 'materialName', minWidth: '110' },
        { prop: 'assetQuantity', label: '投入量', slotName: 'assetQuantity', minWidth: '110' },
        { prop: 'pictureNo', label: '投入图片', slotName: 'pictureNo', minWidth: '110' },
        { prop: 'personName', label: '经手人', minWidth: '110' },
        { prop: 'assetDate', label: '发现日期', minWidth: '110' },
      ],
      tableData1: [],
      isShowEquip: false,
      facilityBOList: [],
      dialogFormPicVisible: false,
      imgUrl: [],
      currentPage1: 1,
      pageSize1: 10,
      totalSize1: 0,
      totalPages1: 0,
      // 农事作业信息
      loading2: false,
      tableColumn2: [
        { prop: 'facilityBOList', label: '设施名称', slotName: 'facilityBOList' },
        { prop: "machinery", label: "作业农机" },
        { prop: "workload", label: "作业面积" },
        { prop: "inputsRecordBOList", label: "投入农资", slotName: "inputsRecordBOList" },
        { prop: "personBOList", label: "作业人", slotName: "personBOList" },
        { prop: "execStartTime", label: "作业时间", slotName: "execStartTime" },
      ],
      tableData2: [],
      currentPage2: 1,
      pageSize2: 10,
      totalSize2: 0,
      totalPages2: 0,
      showEquips: false,
      inputsRecordBOList: [],
      // 病虫害信息
      loading3: false,
      tableColumn3: [
        { prop: 'facilityNoList', label: '发现设施', minWidth: '120', slotName: 'facilityNoList' },
        { prop: 'alarmTypeName', label: farmingTypeTitles+'类别' },
        { prop: 'alarmDes', label: farmingTypeTitles+'名称' },
        { prop: 'pictureId', label: farmingTypeTitles+'图片', slotName: 'img' },
        { prop: 'disposePictureId', label: '处理图片', slotName: 'img' },
        { prop: 'insectDisposeDes', label: '备注' },
      ],
      tableData3: [],
      currentPage3: 1,
      pageSize3: 10,
      totalSize3: 0,
      totalPages3: 0,
      // 产量信息
      loading4: false,
      tableColumn4: [
        { prop: "facilityName", label: "产出设施", minWidth: "120" },
        { prop: "grade", label: "产量品级", minWidth: "120" },
        { prop: "standardName", label: "产量规格", slotName: "standardName", minWidth: "120" },
        { prop: "yield", label: "产量", slotName: "yield", minWidth: "120" },
      ],
      tableData4: [],
      currentPage4: 1,
      pageSize4: 10,
      totalSize4: 0,
      totalPages4: 0,
      // 防治信息
      loading5: false,
      tableColumn5: [
        // { prop: 'name', label: '防治'+farmingTypeTitles + '名称', minWidth: '110' },
        // { prop: 'facilityNoList', label: '防治设施', slotName: 'facilityNoList', minWidth: '110' },
        // { prop: 'inputsRecordBOs', label: '用药信息', slotName: 'inputsRecordBOs', minWidth: '110' },
        // { prop: 'disposeManName', label: '操作人', minWidth: '110' },
        // { prop: 'disposeDate', label: '防治时间', minWidth: '110' },
        { prop: 'name', label: '防治'+farmingTypeTitles + '名称', minWidth: '110' },
        { prop: 'facilityNoList', label: '防治设施', slotName: 'facilityNoList', minWidth: '110' },
        { prop: 'dragName', label: '用药名称', minWidth: '110' },
        { prop: 'dragNum', label: '用药数量', slotName: 'dragNum', minWidth: '110' },
        { prop: 'disposeManName', label: '操作人', minWidth: '110' },
        { prop: 'disposeDate', label: '防治时间', minWidth: '110' },
      ],
      tableData5: [],
      currentPage5: 1,
      pageSize5: 10,
      totalSize5: 0,
      totalPages5: 0,
      // 淘汰信息
      loading6: false,
      tableColumn6: [
        { prop: 'facilityBOs', label: '淘汰设施', slotName: 'facilities', minWidth: '110' },
        { prop: 'batchSingleNos', label: '淘汰编号', minWidth: '110' },
        { prop: 'cause', label: '淘汰原因', minWidth: '110' },
        { prop: 'operateName', label: '处理人', minWidth: '110' },
        { prop: 'operateTime', label: '淘汰时间', minWidth: '110' },
      ],
      tableData6: [],
      currentPage6: 1,
      pageSize6: 10,
      totalSize6: 0,
      totalPages6: 0,
      // 治疗信息
      loading7: false,
      tableColumn7: [
        { prop: "alarmDes", label: "治疗"+farmingTypeTitles + "名称" },
        { prop: "facilityNos", label: "所在设施", slotName: 'facilityNoList' },
        { prop: "num", label: "患病数量" },
        { prop: "singleNos", label: "患病编号", slotName: 'singleNos' },
        { prop: "dragName", label: "用药名称" },
        { prop: "dragNum", label: "用药量" },
        { prop: "operateName", label: "操作人" },
        { prop: "operateTime", label: "治疗日期" },
      ],
      tableData7: [],
      currentPage7: 1,
      pageSize7: 10,
      totalSize7: 0,
      totalPages7: 0,
    };
  },
  watch: {},
  async created() {
    this.getfacilityList();
    await this.getFarmTypeList();
    this.getTableDataList();
  },
  mounted() {

  },
  methods: {
    setimageheight(i) {
      let zhheight = 60 + 20 * i;
      return zhheight + "px";
    },
    setimagewidth(i) {
      let zhwidth = 30 + 20 * i;
      return zhwidth + "px";
    },
    async getFarmTypeList() {
      const res = await getfarmtypelistmethod.ownFarmingTypelist({
        organizationNo: getToken("organizationNo")
      });
      this.farmTypeList = res.data;
    },
    getFarmTypeName(e) {
      let index = this.farmTypeList.findIndex(el => { return el.farmingTypeNo === e })
      return this.farmTypeList[index].farmingTypeName
    },
    // 查看详情 获取长势图相关信息
    async getgrowtop(e) {
      this.growthInfo = { ...e }
      this.batchNo = e.batchNo
      let newTime = new Date(e.assetDate).getTime() - 1000 * 60 * 60 * 24 * parseInt(e.completionDays)
      this.startDate = new Date(newTime)
      this.detailVisible = true
      this.growimagelist = [];
      let plantdata = await growthApi.queryGrowthPhaseNoByBatchNo(
        e.batchNo
      );
      let nowplantid = plantdata.data;
      if (!nowplantid) {
        this.nowgrowimageindex = 0;
      }
      let zhres = await growthApi.getgrowtop(e.varietyNo);
      let oldlist = zhres.data;
      this.oldlist = oldlist

      let zholdlist = [];
      let hassetindex = false;
      await oldlist.forEach(async (item, index) => {
        let pusobj = {
          pictureNo: item.pictureNo,
          zhid: item.growthPhaseNo,
          growthPhaseNo: item.growthPhaseNo,
          name: item.growthPhaseName || "",
          cameraId: e?.cameraId
        };
        this.$set(zholdlist, index, pusobj);
      });

      zholdlist.forEach(async (item, index) => {
        let imgmes = await growthApi.getgrowtopimgs(item.pictureNo);
        let newpicture = imgmes.data;
        this.$set(
          item,
          "value",
          `data:image/png;base64,${newpicture.pictureData}`
        );
        if (nowplantid && item.growthPhaseNo === nowplantid && !hassetindex) {
          hassetindex = true;
          this.nowgrowimageindex = index;
          this.getdatapictureid(zholdlist[index], index)
        }
      });
      zholdlist.map((el, index) => {
        let co = 0
        for (let i = 0; i < index; i++) {
          this.oldlist[i].cycle && (co += this.oldlist[i].cycle)
        }
        let endCo = co + (this.oldlist[index].cycle || 0)
        let startTime = new Date(this.startDate.getTime() + 1000 * 60 * 60 * 24 * parseInt(co))
        let endTime = new Date(this.startDate.getTime() + 1000 * 60 * 60 * 24 * parseInt(endCo))
        el.startTime = startTime.getFullYear()+'.'+(startTime.getMonth()+1)+'.'+startTime.getDate()
        el.endTime = endTime.getFullYear()+'.'+(endTime.getMonth()+1)+'.'+endTime.getDate()
      })
      this.growimagelist = zholdlist;
    },
    // 点击生长阶段
    getdatapictureid(e, index) {
      this.nowgrowimageindex = index;
      // 周期时间计算
      if (index != -1) {
        let co = 0
        for (let i = 0; i < this.nowgrowimageindex; i++) {
          this.oldlist[i].cycle && (co += this.oldlist[i].cycle)
        }
        let endCo = co + (this.oldlist[this.nowgrowimageindex].cycle || 0)
        this.startTime = new Date(this.startDate.getTime() + 1000 * 60 * 60 * 24 * parseInt(co))
        this.endTime = new Date(this.startDate.getTime() + 1000 * 60 * 60 * 24 * parseInt(endCo))
      } else {
        this.startTime = null
        this.endTime = null
      }
      // 根据生长阶段查询表格
      this.getInputDataList()
      this.getAgrDataList()
      this.getPestDataList()
      this.getOutputDataList()
      this.getPreCureDataList();
      this.getEliminateDataList();
      this.getCureDataList();
    },
    getGrothAll() {
      this.startTime = null
      this.endTime = null
      this.getdatapictureid({}, -1)
    },
    // 批次表格查询
    getTableDataList() {
      this.loading = true;
      let params = {
        page: this.currentPage,
        size: this.pageSize,
        sortList: this.sortList || [],
        entity: {
          batchType: "SINGLE",
          farmingTypeNo: getToken("farmingTypeNo"),
        }
      };
      batchApi.gettablelist(params).then(res => {
        this.loading = false;
        if (res.code === 1) {
          // this.$message.success('查询成功')
        } else {
          this.$message.error("查询失败");
        }
        let data = res.data.content;
        data.map(el => {
          el.facilityNames = el.batchFacilityMapperList ? el.batchFacilityMapperList.map(ele=>{return ele.facilityName}).join('，') : ''
        })
        this.batchList = data;
        // 赋值总条数
        this.totalSize = res.data.totalElements;
        // this.addblankmet();
        // this.resetActionBar();
      });
    },
    // 农资投入查询
    getInputDataList() {
      this.loading1 = true;
      let params = {
        page: this.currentPage1,
        size: this.pageSize1,
        entity: {
          batchNo: this.batchNo || undefined,
          batchType: "SINGLE",
          startTime: this.startTime && this.dateToFormattwo(this.startTime),
          endTime: this.endTime && this.dateToFormattwo(this.endTime),
          farmingTypeNo: sessionStorage.farmingTypeNo,
          organizationNo: sessionStorage.organizationNo,
        },
      };
      managementtwo.getTableDataList(params).then((res) => {
        this.loading1 = false;
        if (res.code === 0) {
          this.$message.error(res.msg);
        }
        let data = res.data;
        this.totalSize1 = data.totalElements;
        this.tableData1 = data.content;
      });
    },
    changePageSize1(pageSize) {
      this.pageSize1 = pageSize;
      this.getInputDataList();
    },
    changeCurrentPage1(currentPage) {
      this.currentPage1 = currentPage;
      this.getInputDataList();
    },
    // 农事作业查询
    getAgrDataList() {
      this.loading2 = true;
      let params = {
        page: this.currentPage2,
        size: this.pageSize2,
        entity: {
          batchNo: this.batchNo || undefined,
          batchType: "SINGLE",
          farmingTypeNo: sessionStorage.farmingTypeNo,
          organizationNo: sessionStorage.organizationNo,
          startTime: this.startTime && this.dateToFormat(this.startTime),
          endTime: this.endTime && this.dateToFormat(this.endTime),
        },
      };
      agriculturalRecords.getCulturalList(params).then((res) => {
        this.loading2 = false;
        let data = res.data;
        this.totalSize2 = data.totalElements;
        this.tableData2 = data?.content;
      });
    },
    changePageSize2(pageSize) {
      this.pageSize2 = pageSize;
      this.getAgrDataList();
    },
    changeCurrentPage2(currentPage) {
      this.currentPage2 = currentPage;
      this.getAgrDataList();
    },
    // 病虫害信息
    getPestDataList() {
      this.loading3 = true;
      this.tableData3 = [];
      let params = {
        page: this.currentPage3,
        size: this.pageSize3,
        entity: {
          organizationNo: getToken("organizationNo"),
          // disposeAction: 1,
          batchType: "SINGLE",
          alarmBatchId: this.batchNo || undefined,
          startTime: this.startTime,
          endTime: this.endTime,
        }
      };
      pestApi.getlist(params).then(res => {
        if (res.code === 1) {
          // this.$message.success('查询成功')
        } else {
          this.$message.error("查询失败");
        }
        this.loading3 = false;
        let data = res.data;
        // 赋值总条数
        this.totalSize3 = data.totalElements;
        // 赋值数组
        this.tableData3 = data.content;
      });
    },
    changePageSize3(pageSize) {
      this.pageSize3 = pageSize;
      this.getPestDataList();
    },
    changeCurrentPage3(currentPage) {
      this.currentPage3 = currentPage;
      this.getPestDataList();
    },
    // 产量信息
    getOutputDataList() {
      this.loading4 = true;
      let params = {
        page: this.currentPage4,
        size: this.pageSize4,
        entity: {
          batchType: "SINGLE",
          batchNo: this.batchNo || undefined,
          startTime: this.startTime && this.dateToFormat(this.startTime),
          endTime: this.endTime && this.dateToFormat(this.endTime),
          farmingTypeNo: sessionStorage.getItem("farmingTypeNo"),
        }
      };
      outputApi.getlist(params).then((res) => {
        this.loading4 = false;
        if (res.code === 0) {
          this.$message.error("表格获取失败");
        }
        let data = res.data.content;
        // 赋值总条数
        this.totalSize4 = res.data.totalElements;
        // 赋值数组
        this.tableData4 = data;
        this.tableData4.forEach((item) => {
          if (item.productionBatchBO) {
            this.$set(item, "lesseeNo", item.productionBatchBO.lesseeNo);
            this.$set(
              item,
              "completionDate",
              this.dateToFormat(item.productionBatchBO.completionDate)
            );
          }
        });
      });
    },
    changePageSize4(pageSize) {
      this.pageSize4 = pageSize;
      this.getOutputDataList();
    },
    changeCurrentPage4(currentPage) {
      this.currentPage4 = currentPage;
      this.getOutputDataList();
    },
    // 防治信息
    getPreCureDataList() {
      this.loading5 = true;
      let params = {
        page: this.currentPage5,
        size: this.pageSize5,
        entity: {
          batchType: "SINGLE",
          batchNo: this.batchNo || undefined,
          startTime: this.startTime && this.dateToFormat(this.startTime),
          endTime: this.endTime && this.dateToFormat(this.endTime),
          farmingTypeNo: sessionStorage.getItem("farmingTypeNo"),
        }
      };
      pestControlApi.queryBatchNoPageList(params).then((res) => {
        this.loading5 = false;
        let data = res.data.content;
        // 赋值总条数
        this.totalSize5 = res.data.totalElements;
        // 赋值数组
        this.tableData5 = data;
      });
    },
    changePageSize5(pageSize) {
      this.pageSize5 = pageSize;
      this.getPreCureDataList();
    },
    changeCurrentPage5(currentPage) {
      this.currentPage5 = currentPage;
      this.getPreCureDataList();
    },
    // 淘汰信息
    getEliminateDataList() {
      this.loading6 = true;
      let params = {
        page: this.currentPage6,
        size: this.pageSize6,
        entity: {
          batchType: "SINGLE",
          batchNo: this.batchNo || undefined,
          startTime: this.startTime && this.dateToFormattwo(this.startTime),
          endTime: this.endTime && this.dateToFormattwo(this.endTime),
          farmingTypeNo: sessionStorage.getItem("farmingTypeNo"),
        }
      };
      eliminationApi.queryPageList(params).then((res) => {
        this.loading6 = false;
        let data = res.data.content;
        // 赋值总条数
        this.totalSize6 = res.data.totalElements;
        // 赋值数组
        data.map(el => {
          if (el.operateTime) {
            el.operateTime = this.dateToFormat(el.operateTime)
          }
        })
        this.tableData6 = data;
      });
    },
    changePageSize6(pageSize) {
      this.pageSize6 = pageSize;
      this.getEliminateDataList();
    },
    changeCurrentPage6(currentPage) {
      this.currentPage6 = currentPage;
      this.getEliminateDataList();
    },
    // 治疗信息
    getCureDataList() {
      this.loading7 = true;
      let params = {
        page: this.currentPage7,
        size: this.pageSize7,
        entity: {
          batchType: "SINGLE",
          alarmBatchNo: this.batchNo || undefined,
          startTime: this.startTime,
          endTime: this.endTime,
          farmingTypeNo: sessionStorage.getItem("farmingTypeNo"),
        }
      };
      healthPestApi.queryBatchPageList(params).then((res) => {
        this.loading7 = false;
        let data = res.data.content;
        data.map(el => {
          if (el.operateTime) {
            el.operateTime = this.dateToFormat(el.operateTime)
          }
        })
        // 赋值总条数
        this.totalSize7 = res.data.totalElements;
        // 赋值数组
        this.tableData7 = data;
      });
    },
    changePageSize7(pageSize) {
      this.pageSize7 = pageSize;
      this.getCureDataList();
    },
    changeCurrentPage7(currentPage) {
      this.currentPage7 = currentPage;
      this.getCureDataList();
    },
    // 查询当前图片
    upimage(e) {
      if (e) {
        this.imgUrl = [];
        this.dialogFormPicVisible = true;
        managementtwo.getimage(e).then((res) => {
          let data = res.data || {};
          this.imgUrl = [`data:image/png;base64,${data.pictureData}`];
        });
      }
    },
    // 获取图片详情 病虫害
    getpicmessage(id) {
      this.dialogFormPicVisible = true;
      pestInfoApi.queryPictureList(id).then(res => {
        this.imgUrl = res.data.map(el => {
          return `data:image/png;base64,${el.pictureData}`;
        })
      });
    },
    // 查看农资
    seeEquips(row) {
      this.showTitle = '投入农资信息'
      this.inputsRecordBOList = row.inputsRecordBOList;
      this.showEquips = true;
    },
    seeIll(row) {
      this.showTitle = '患病编号'
      this.inputsRecordBOList = row.singleNos;
      this.showEquips = true;
    },
    seeEquip(row) {
      this.facilityBOList = row.facilityBOList || row.facilityBOs || row.facilitys || [];
      this.isShowEquip = true;
    },
    checkFacility(row) {
      let list = []
      row.facilityNoList.map(el => {
        let index = this.facilityList.findIndex(ele => {
          return el === ele.facilityNo
        })
        list.push({ facilityNo: el, facilityName: this.facilityList[index].facilityName })
      })
      this.facilityBOList = list;
      this.isShowEquip = true;
    },
    checkEliFacility(row) {
      this.facilityBOList = row.facilityBOs || [];
      this.isShowEquip = true;
    },
    useMedicine(row) {
      this.useMedicineList = row.inputsRecordBOs
      this.useMedicineVisible = true;
    },
    // 获取设施选择框数据
    getfacilityList() {
      userApi.getfacilityAll({
        organizationList: sessionStorage.getItem("organizationList").split(","),
        farmingTypeNo: sessionStorage.getItem("farmingTypeNo"),
      }).then(res => {
        this.facilityList = res.data;
      });
    },
  }
};
</script>

<style scoped lang="scss">
.batchbox {
  display: flex;
  flex-flow: wrap;
  align-content: flex-start;
  padding: 10px 20px;
  height: calc(100% - 50px);
  overflow: auto;

  .batchone {
    width: calc(50% - 20px);
    height: 226px;
    background-color: #065766;
    padding: 20px;
    margin-bottom: 30px;

    &:nth-child(2n-1) {
      margin-right: 20px;
    }

    &:nth-child(2n) {
      margin-left: 20px;
    }

    .batch-title {
      position: relative;
      text-align: right;
      height: 50px;

      .batch-no {
        position: absolute;
        top: -5px;
        left: -30px;
        background-color: #01859e;
        height: 40px;
        line-height: 40px;
        padding: 0 30px;
      }
      .batch-status {
        &>div {
          height: 24px;
          line-height: 24px;
          margin-top: 5px;
          padding: 0 25px;
          display: inline-block;
          background-color: #106986;
          // color: #333;
          // border-radius: 0 14px 14px 0;
          // margin-left: -10px;
          // position: relative;
          // z-index: 10;

          // &:nth-child(2),
          // &:nth-child(3) {
          //   z-index: 9;

          //   &::before {
          //     content: "";
          //     display: inline-block;
          //     position: absolute;
          //     left: 0px;
          //     width: 14px;
          //     height: 28px;
          //     background-color: #065766;
          //     border-radius: 0 14px 14px 0;
          //   }
          // }
          // &:nth-child(3) {
          //   z-index: 8;
          // }

          &.active {
            background-color: #107495;
            // color: #3399FF;
          }
        }
      }
    }

    .batch-content {
      display: flex;
      flex-flow: row wrap;

      .batch-desc {
        width: 50%;
        display: flex;
        margin-bottom: 10px;

        .label {
          width: 100px;
        }

        .desc {
          width: calc(100% - 110px);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    .batch-footer {
      text-align: right;

      .btndefault {
        display: inline-block;
        width: fit-content;
        background-color: #18d0c4;

        .btn {
          margin-top: 3px;
          background-color: #18d0c4;
        }
      }
    }
  }
}

.batchdetail {
  width: calc(100%);
  height: 100%;
  padding: 0 15px;
  .growth-title {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: left;
    font-weight: 600;
    font-size: 18px;
    position: relative;
    .toback {
      position: absolute;
      right: 0;
      top: 5px;
      width: fit-content;
      line-height: 32px;
      .btn {
        background-color: #18d0c4;
      }
      img {
        height: 22px;
        vertical-align: sub;
      }
    }
    .allbtn {
      position: absolute;
      right: 0;
      top: 0;
      width: fit-content;
      line-height: 32px;
      .btn {
        background-color: #18d0c4;
      }
    }
  }
  .growth-title-batch {
    padding: 10px 15px;
    font-size: 18px;
    color: #05e7d8;
    .batch {
      display: inline-block;
      margin-right: 30px;
    }
  }
  .growth-info {
    margin-bottom: 10px;
    background-color: #094054;
    padding: 15px;
    .growth-info-content {

      &>div {
        margin-right: 30px;
        display: inline-block;
        vertical-align: middle;
      }
    }
    .growth-info-time {
      margin-top: 10px;
      color: #05e7d8;
    }
  }
  .growth-stage {
    width: 100%;
    height: 340px;
    margin-bottom: 10px;
    background-color: #094054;
    .growth-stage-view {
      width: 100%;
      height: 310px;
      padding-top: 18px;
      display: flex;
      flex-wrap: nowrap;
      // align-items: center;
      justify-content: space-around;
      .show-view-item {
        width: 150px;
        height: 300px;
        cursor: pointer;
        background-size: 150px 260px;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        position: relative;
        .view-item-image-time {
          width: 100%;
          height: 26px;
          line-height: 26px;
          text-align: center;
          background: url("~@/assets/growthmodel/timebg.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          position: absolute;
          top: 45px;
          left: 0;
          white-space: nowrap;
          font-size: 13px;
        }
        .view-item-image {
          margin-top: 50px;
          max-height: 180px;
          height: auto;
        }
        .view-item-image-name {
          width: 150px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          font-weight: 600;
        }
      }
      .show-view-item-slect {
        background-image: url("~@/assets/grow-shuidao/kuangkuang.png");
      }
    }
  }
  .groth-table {
    margin-bottom: 10px;
    height: 590px;
    position: relative;
  }
  .groth-table-two {
    margin-bottom: 10px;
    display: flex;
    height: 590px;
    position: relative;

    .table-box {
      flex: 1;
      width: calc(50% - 15px);

      &:first-child {
        margin-right: 15px;
      }
    }
  }
  img {
    vertical-align: middle;
  }
  .tablebox {
    height: calc(100% - 40px);
  }
  ::v-deep .el-tooltip {
    .el-button {
      height: 26px;
      line-height: 26px;
      padding: 0 15px;
    }
  }
}
// TODO: 查看投入物资
.facility-list {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  .facility-item {
    width: 400px;
    max-width: 30%;
    min-width: 30%;
    margin-right: 3%;
    margin-bottom: 10px;
    // height: 80px;
    border-radius: 5px;
    // border: 1px solid #ccc;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.15);
    padding: 10px 20px;

    .info-line {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      font-size: 14px;
      &:not(:last-child) {
        margin-bottom: 10px;
      }
      .name {
        text-align: left;
        width: 100px;
        flex-shrink: 0;
      }
      .value {
        width: 100%;
        text-align: left;
        font-weight: normal;
      }
    }
  }
}
.medicine {
  width: 100%;
  .medicine-item {
    margin-bottom: 15px;
    padding-bottom: 15px;
    padding-left: 30px;
    border-bottom: 1px solid #ccc;
    display: flex;
    // justify-content: space-between;
    .info-line {
      display: flex;
      width: 50%;
    }
    &:last-child {
      border-bottom: none;
    }
  }
}
.noData {
  width: 100%;
  margin-top: 20px;
  text-align: center;
}
</style>
